<!--
 * @Description: 
 * @Author: lz
 * @Date: 2022-12-22 21:57:53
 * @LastEditTime: 2022-12-22 21:57:54
 * @LastEditors: lz
-->

<template>
  <div class="manage-container h-100">
    <div class="head-filter pa-flex-center">
      <div
        v-for="(item, index) in tabs"
        :key="index"
        @click="handleTab(item.value, index)"
        :class="currentIndex == index ? 'checked' : ''"
      >{{ item.label }}</div>
    </div>
    <div class="search">
      项目名称
      <el-input v-model="proName" placeholder="项目名称" class="input"></el-input>
      <el-button class="search-button" @click="getProject()">搜索</el-button>
    </div>
    <div class="proItem">
      <div v-for="item in records" :key="item.id">
        <project-item :proItem="item" />
      </div>
    </div>
    <el-pagination
      class="pagination"
      @current-change="handleCurrentChange"
      :current-page="current"
      :page-size="4"
      layout="total, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>
  </div>
</template>
<script>
import projectItem from './components/projectItem.vue'
import { getProjectApi } from '@/api/manageApi.js'
export default {
  components: {
    projectItem
  },
  data () {
    return {
      tabs: [
        { label: '项目立项阶段', value: 1 },
        { label: '规划许可阶段', value: 2 },
        { label: '施工许可阶段', value: 3 },
        { label: '竣工验收阶段', value: 4 }
      ],
      currentIndex: 0,
      proName: '',
      records: [],
      proObj: {},
      total: 0,
      current: 1
    }
  },
  mounted () {
    this.getProject()
  },
  methods: {
    handleTab (value, index) {
      this.getProject(value)
      this.currentIndex = index
    },
    handleCurrentChange (val) {
      this.current = val
      this.getProject()
    },
    getProject (stage = 1) {
      getProjectApi({
        pageNo: this.current,
        pageSize: 4,
        agencyPeople: JSON.parse(localStorage.getItem('P-User-Info')).id,
        projectName: this.proName,
        stage
      }).then(res => {
        if (res.code == 0) {
          let type = [
            {
              label: "审批",
              lableId: "A00001"
            },
            {
              label: "核准",
              lableId: "A00002"
            },
            {
              label: "备案",
              lableId: "A00003"
            }
          ];
          this.records = res.data.records
          this.records.forEach(element => {
            type.forEach(n => {
            if (n.lableId === element.projectType) {
                element.projectTypeName = n.label;
            }
          });
          });
          this.total = res.data.total
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.manage-container {
  .head-filter {
    width: 706px;
    height: 62px;
    background: #dfe9ff;
    border-radius: 31px;
    margin-bottom: 32px;
    div {
      width: 164px;
      height: 46px;
      text-align: center;
      line-height: 46px;
      cursor: pointer;
    }
    .checked {
      background: #3d78ff;
      border-radius: 23px;
      color: #fff;
    }
  }
  .search {
    margin-bottom: 30px;
    .input {
      width: 215px;
      height: 48px;
      box-shadow: 0px 6px 58px 0px rgba(196, 203, 214, 0.1);
      border-radius: 14px;
      margin-left: 16px;
    }
    .search-button {
      width: 90px;
      height: 41px;
      background: #4880ff;
      border-radius: 5px;
      margin-left: 24px;
      color: #fff;
    }
  }
  .proItem {
    // width: 1149px;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-row-gap: 29px;
    grid-column-gap: 29px;
  }
  .pagination {
    display: flex;
    justify-content: flex-end;
    margin-top: 40px;
  }
}
</style>
